import {
  Table,
  Layout,
  Button,
  Tag,
  Space,
  Image,
  message,
} from "antd";
import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router";
import { deleteContent } from "../../../http/content";
import {
  ClassifyData,
  ContentData,
  homeActions,
  selectAllClassify,
  selectAllContent,
} from "../../home/home.slice";
import { CreateModule } from "../CreateModule";
import { SetActions } from "../set.slice";

export const ItemList = () => {
  const content = useSelector(selectAllContent);

  const classify = useSelector(selectAllClassify);

  const dispatch = useDispatch();

  const changeModule = useCallback(() => {
    dispatch(SetActions.onShowSetModule());
  }, [dispatch]);

  const nav = useNavigate();
  const showHome = useCallback(() => {
    nav("/", { replace: true });
  }, [nav]);

  const onDelete = (id: number) => {
    deleteContent(id)
      .then(() => {
        dispatch(homeActions.deleteContent(id));
      })
      .catch(() => {
        message.error("内容删除失败");
      });
  };
  const onUpdate = (id: number) => {
    dispatch(SetActions.onSetSelectContentId(id));
    changeModule();
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "作者",
      dataIndex: "author",
      key: "author",
    },
    {
      title: "简介",
      dataIndex: "description",
      key: "description",
      ellipsis:true,
    },
    {
      title: "头图路径",
      dataIndex: "imgUrl",
      key: "imgUrl",
      render: (imgUrl: string) => <Image src={imgUrl}></Image>,
    },
    {
      title: "内容路径",
      dataIndex: "fileUrl",
      ellipsis:true,
      key: "fileUrl",
    },
    {
      title: "外链路径",
      dataIndex: "demoUrl",
      ellipsis:true,
      key: "demoUrl",
    },
    {
      title: "分类",

      key: "classify",
      dataIndex: "classify",
      render: (c: number) => {
        return (
          <Tag color="geekblue">
            {" "}
            {
              (classify.filter((i) => i.id === Number(c))[0] as ClassifyData)
                .name
            }
          </Tag>
        );
      },
    },
    {
      title: "标签",

      key: "tag",
      dataIndex: "tag",
      render: (tag: string) => (
        <>
          {tag.split(",").map((t, i) => {
            return (
              <Tag color="lime" key={i}>
                {t}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (item: ContentData) => (
        <Space size="middle">
          <Button type="link" onClick={() => onUpdate(item.id)}>
            更新
          </Button>
          <Button type="link" onClick={() => onDelete(item.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <Layout className="itemList">
      <Space className="setHeader">
        <Button onClick={showHome}>{"返回首页"}</Button>
      </Space>
      <Space direction="horizontal" align="end" className="setHeader">
        <Button onClick={changeModule}>{"新增内容"}</Button>
      </Space>
      <Table columns={columns} dataSource={content} />
      <CreateModule></CreateModule>
    </Layout>
  );
};
